<template>
  <div>
    <div style="width: 100%; height: 10px; background-color: #f1f1f1"></div>
    <div class="bigbox">
      <!-- 表头盒子 -->
      <div class="leftbox">
        <!-- 树节点过滤 -->
        <div>
          <el-input
            placeholder="输入关键字进行过滤"
            size="small"
            v-model="filterText"
          >
          </el-input>
        </div>
        <!-- 树组件 -->
        <div style="margin-top: 15px">
          <el-tree
            ref="tree"
            :props="props"
            :highlight-current="true"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            :load="loadNode"
            lazy
          >
          </el-tree>
        </div>
      </div>
      <div style="width: 10px; background-color: #f1f1f1"></div>
      <!-- 盒子主体 -->
      <div class="bodybox">
        <div class="titlebox">
          <div class="text">客户信息</div>
          <div
            class="right"
            :style="{ alignItems: 'center', lineHeight: '32.5px' }"
          >
            <button
              type="primary"
              size="small"
              class="bewdao daochu"
              @click="add"
            >
              新增
            </button>
            <el-tooltip
              class="item"
              effect="dark"
              content="刷新"
              placement="top"
            >
              <span
                @click="shuaxin"
                :style="{ cursor: 'pointer', fontSize: '20px' }"
                ><i class="el-icon-refresh-right"></i
              ></span>
            </el-tooltip>
            <el-dropdown trigger="click" @command="command">
              <span class="el-dropdown-link">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="密度"
                  placement="top"
                >
                  <span :style="{ cursor: 'pointer', fontSize: '20px' }"
                    ><i class="el-icon-d-caret"></i
                  ></span>
                </el-tooltip>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="dropdown-list" command="默认"
                  >默认</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-list" command="中等"
                  >中等</el-dropdown-item
                >
                <el-dropdown-item class="dropdown-list" command="紧凑"
                  >紧凑</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="table-content">
          <template>
            <el-table
              v-loading="loading"
              :data="tableData"
              style="width: 100%"
              border
              ref="table"
              :size="iissize"
              :header-cell-style="{
                background: '#f5f5f5',
                'text-align': 'center',
              }"
            >
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="companyName"
                align="center"
                label="企业名称"
              >
              </el-table-column>
              <el-table-column prop="lineName" align="center" label="上级线路">
              </el-table-column>
              <el-table-column prop="sort" align="center" label="排序号">
              </el-table-column>
              <el-table-column
                prop="companyLocation"
                align="center"
                label="地址"
              >
              </el-table-column>
              <el-table-column
                prop="companyLongitude"
                align="center"
                label="经度"
              >
              </el-table-column>
              <el-table-column
                prop="companyLatitude"
                align="center"
                label="纬度"
              >
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <div class="operate">
                    <i
                      style="
                        font-size: 20px;
                        color: rgb(64, 149, 229);
                        cursor: pointer;
                      "
                      class="el-icon-edit"
                      @click="handleEdit(scope.row)"
                    ></i>
                    <i
                      style="font-size: 20px; color: red; cursor: pointer"
                      class="el-icon-delete"
                      @click="handleDel(scope.row.id)"
                    ></i>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <div class="fenye">
            <el-pagination
              background
              layout="prev, pager, next"
              :current-page.sync="pageobj._pageNo"
              @current-change="getdatalist"
              :total="total"
            />
          </div>
        </div>
      </div>
      <el-dialog
        :title="'客户信息'"
        :visible.sync="centerDialogVisible"
        v-if="centerDialogVisible"
        label-position="left"
        width="800px"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :before-close="beforeClose"
      >
        <AmapCustomer
          ref="amap"
          :companyData="companyData"
          :lineList='lineList'
          :id='id'
          v-if="centerDialogVisible"
          @finish="finish"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  delPowerCustomerApi,
  getLineTreeApi,
  getPointTreeApi,
  getPowerCustomerPageApi
} from '@/api/fileFlow'
import AmapCustomer from './AmapCustomer.vue'
export default {
  name: 'SMSuseIndex',
  components: { AmapCustomer },
  data () {
    return {
      value: '',
      orgName: '',
      tableData: [],
      id: '',
      options: [],
      lineList: [],
      filterText: '',
      page: {
        pageNo: 0,
        pageSize: 10
      },
      props: {
        label: 'name',
        children: 'sonList'
      },
      dialogVisible: false,
      dataList: [],
      //   pointSelect: [],
      isEdit: false,
      centerDialogVisible: false,
      form: {},
      iissize: 'medium',
      loading: false,
      total: 0,
      pageobj: {
        _pageNo: 0,
        _pageSize: 10
      },
      companyData: {}
    }
  },
  methods: {
    // 树节点点击
    async handleNodeClick (val) {
      console.log(val)
      if (val.type === 2) {
        this.id = val.originalId
        this.getdatalist(this.id)
      }
    },
    // 树组件懒加载
    async loadNode (node, resolve) {
      if (node.level === 0) {
        // 初始的级数（最顶层）
        const res = await getPointTreeApi({ powerPointName: '', lineName: '' })
        // this.pointSelect = res.data.list
        console.log(res)
        return resolve(res?.data.list) // 最顶层数据渲染为region
      } else if (node.level === 1) {
        const res = await getLineTreeApi({
          powerPointId: node.data.originalId
        })
        this.lineList = res.data.list
        console.log(res)
        return resolve(res?.data.list)
      } else {
        return resolve([])
      }
    },
    // 树节点过滤
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    // 获取数据
    async getdatalist (now) {
      this.loading = true
      const res = await getPowerCustomerPageApi({
        pageNo: this.pageobj._pageNo - 1,
        pageSize: this.pageobj._pageSize,
        lineId: now
      })
      this.tableData = res.data.list
      this.total = res.data.totalCount
      console.log(res)
      this.loading = false
    },
    // 刷新列表
    shuaxin () {
      this.getdatalist(this.id)
      this.$message.success('列表刷新成功')
    },
    // 查询
    submit () {
      // console.log(this.dataList)
      this.getdatalist(this.id)
    },
    command (val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    async chongzhi () {
      this.getdatalist(this.id)
    },
    // 编辑
    async handleEdit (row) {
      console.log(row)
      this.isEdit = true
      this.companyData = { ...row }
      this.centerDialogVisible = true
    },
    async add () {
      if (!this.id) {
        return this.$message.error('请先选择线路')
      }
      this.isEdit = false
      this.centerDialogVisible = true
    },
    finish () {
      this.centerDialogVisible = false
      this.getdatalist(this.id)
    },
    beforeClose () {
      this.centerDialogVisible = false
      this.isEdit = false
      const powerPointId = this.id
      this.id = powerPointId
      this.companyData = {}
      this.getdatalist(this.id)
    },
    // 删除
    async handleDel (id) {
      this.$confirm('此操作将永久删除该线路信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const res = await delPowerCustomerApi(id)
            if (res.code === 200) {
              this.$message.success('删除成功')
            } else {
              this.$message.error(res.message)
            }
          } catch (err) {}
          this.getdatalist(this.id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  background-color: #fff;
  min-height: 100%;
  display: flex;
  .leftbox {
    width: 300px;
    height: 100%;
    padding: 20px;
  }
  .bodybox {
    width: 100%;
    height: 100%;
    padding: 20px 20px 20px 20px;
    .titlebox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .text {
        font-weight: bold;
        font-size: 18px;
      }
      .right {
        align-items: center;
        i {
          margin-left: 10px;
        }
        .bewdao {
          width: 63px;
          height: 32px;
        }
        .daochu {
          background-color: #1890ff;
          color: #fff;
          border: none;
          border-radius: 3px;
        }
      }
    }
    .fenye {
      margin-top: 15px;
      text-align: right;
    }
  }
}

.dropdown-list {
  text-align: center;
  width: 50px;
}
.operate {
  display: flex;
  justify-content: space-around;
}
</style>
